<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>数据后台管理系统->个人信息</title>
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <meta name="description" content="描述内容...">
  <meta name="keywords" content="关键词...">
  <link rel="shortcut icon" href="../images/system.ico">

  <!--  css-->
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../plugins/elementui/index.css">
<!--  js-->
  <script src="../js/jq/jquery_3.6_min.js"></script>
  <script src="../js/vue/axios-0.18.0.js"></script>
  <script src="../js/vue/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
</head>
<body>
<div id="app">
  <!--顶部-->
  <header class="el-header">
  <!--  logo-->
    <div class="logo">
      <a href="../index.html" class="text_underline">
        <h2 class="text-success logo-h">{{sysTitle}}</h2>
      </a>
    </div>

  <!--  导航-->
    <div class="header-nav">
      <ul class="h-nav">
        <li>
          <a href="../index.html" > 首页</a>
        </li>
        <li>
          <a href="#"> 系统管理 <span class="li-font1"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 个人管理 <span class="li-font2"></span></a>
          <ul class="nav-sub">
            <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
          </ul>
        </li>
        <li>
          <a href="#"> 关于</a>
        </li>
      </ul>
    </div>

    <!--    用户类型及部门-->
    <div class="userTypeAndDepart">
      <p class="userFont">{{userDepartment}}&nbsp;&nbsp;{{userClass}}</p>
    </div>
  </header>

   <!--主部-->
  <div class="el-main">
    <!--  左边-->
    <div class="main-left">
      <!--    头像-->
      <div class="left-head-photo">
        <img :src="userImageSrc" alt="头像">
        <i class="i-lh1"><span class="photo-state"></span>{{userID}}</i>
        <i class="i-lh2">{{userName}}</i>
      </div>

      <!--    菜单-->
      <div class="left-menu">菜单</div>

      <!--    树导航-->
      <div>
        <ul class="left-nav">
          <li>
            <a href="#"> 系统管理 <span class="left-li-font1"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList1"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>

          <li class="li-m li-margin">
            <a href="#"> 个人管理 <span class="left-li-font2"></span></a>
            <ul class="left-nav-sub">
              <li v-for="item in subList2"><a :href="item.href">{{item.li}}</a></li>
            </ul>
          </li>
        </ul>
      </div>

    </div>

    <!--  右边-->
    <div class="main-right">

      <div id="app-info">
        <el-form class="info" ref="infosForm" :model="formData" :rules="rules" label-width="100px">
          <el-row style="background-color: #1b7cd7; width: 400px;">
            <el-col :span="12" >
              <h2 style="text-align: center;width: 400px; height: 50px;line-height: 50px; border-radius: 50px; color: #fff;">个人信息</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-top: 10px">
              <!--:label="formData.id" -->
              <el-form-item label="用户账号">
                <p style="width: 270px; border-bottom: 1px solid #dcdfe6;padding-left: 26px;">{{formData.id}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户姓名">
                <p style="width: 270px; border-bottom: 1px solid #dcdfe6;padding-left: 26px;">{{formData.name}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户电话">
                <p style="width: 270px; border-bottom: 1px solid #dcdfe6;padding-left: 26px;">{{formData.tell}}</p>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" style="margin-top: 10px">
              <!--:label="formData.id" -->
              <el-form-item label="用户头像">
                <img :src="userImageSrc" alt="头像" style="width: 80px; height: 80px; margin: -13px 0 0 26px">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="text-align: center;margin-top: 5px">
              <el-button  @click="handleQuery()">刷新</el-button>
              <el-button type="primary" @click="handleEdit()">编辑</el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 编辑标签弹层 -->
        <div class="add-form">
          <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible4Edit">
            <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户名字" prop="name">
                    <el-input v-model="formData.name"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用户电话" prop="tell">
                    <el-input v-model="formData.tell"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" >
                  <el-form-item label="更换头像" prop="image">
                    <el-input v-model="uploadImageSrc" name="fileImage" @change="getFileImage()" type="file" class="uploadImage"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <img :src="userImageSrc" alt="头像图片" style="width: 120px; height: 120px;margin: -240px 0px 0px 409px;">
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取消</el-button>
              <el-button type="primary" @click="handleUpdate()">修改</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="../js/vue/pages/vue-infos.js"></script>
<script src="../js/common.js"></script>
</body>
</html>